<template>
  <div class="box">
    <div class="head">
      <van-icon class="arrow-left" name="arrow-left" @click="goBack" />
      <p class="title">登录</p>
    </div>
    <van-cell-group>
      <van-field v-model="tel" label="手机号" placeholder="请输入手机号" />
      <van-field
        v-model="password"
        :type="type"
        clearable
        :right-icon="typeIcon"
        @click-right-icon="changeIocn(typeIcon)"
        label="密码"
        placeholder="输入密码"
      />
    </van-cell-group>
    <van-button type="primary" size="large" @click="goLogin">登录</van-button>
    <p @click="goReg" class="p">手机号快速注册</p>
  </div>
</template>
<script>
// import axios from "axios";
export default {
  name: "Login",
  data() {
    return {
      tel: "18312345677",
      password: "Wlj999",
      typeIcon: "closed-eye",
      type: "password",
    };
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    // 密码图标显示或隐藏
    changeIocn(val) {
      if (val == "closed-eye") {
        this.type = "text";
        this.typeIcon = "eye-o";
      } else {
        this.type = "password";
        this.typeIcon = "closed-eye";
      }
    },
    goLogin() {
      this.$server
        .post("/api/user/login", {
          loginname: this.tel,
          password: this.password,
        })
        .then((res) => {
          console.log("res.data", res.data);
          if (res.data.code == 200) {
            localStorage.setItem("token", res.data.data.token);
            localStorage.setItem("userid", res.data.data.userid);
            this.$router.push("/My");
          }
        });
    },
    goReg() {
      this.$router.push("/Reg");
    },
  },
};
</script>

<style scoped>
.head {
  height: 45px;
  background-color: skyblue;
  text-align: center;
  line-height: 45px;
}
.arrow-left {
  float: left;
  margin: 1rem;
  color: blue;
}
.title {
  text-align: center;
  margin-right: 42px;
}
.box {
  position: relative;
}
.p {
  color: blue;
  position: absolute;
  right: 0;
  margin-top: 10px;
  font-size: 14px;
}
button {
  width: 20rem;
  height: 2.5rem;
  background: red;
  color: white;
  border: none;
  border-radius: 25px;
  margin-left: 1.2rem;
  margin-top: 1.5rem;
}
</style>
